<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const workOrderCode = ref(route.params.id)
const workOrderInfo = reactive({})
const customerResp = reactive({})
const testingResp = reactive({})
const repairResp = reactive({})
const evaluateResps = reactive({})
const electricianResp = reactive({})

const isModalOpen = ref(false)
const currentImage = ref('')
const feedbackImgUrls = computed(() => {
  if (!workOrderInfo.workOrderImgFile) {
    return []
  }
  return workOrderInfo.workOrderImgFile.split('&&') // 分割URL字符串
})
const testImgUrls = computed(() => {
  if (!testingResp.testingImgFile) {
    return []
  }
  return testingResp.testingImgFile.split('&&') // 分割URL字符串
})
const repairImgUrls = computed(() => {
  if (!repairResp.repairImgFile) {
    return []
  }
  return repairResp.repairImgFile.split('&&') // 分割URL字符串
})
const selectedEvaluation = computed(() => {
  // 确保 evaluateResps.value 存在且是数组
  if (Array.isArray(evaluateResps)) {
    return evaluateResps.value.find(item => item.evaluateSource === '1') || '1'
  }
  return '2'
})

function openImage(url) {
  currentImage.value = url
  isModalOpen.value = true
}

function closeModal() {
  isModalOpen.value = false
}
function pri() {
  console.log('selectedEvaluation value:', selectedEvaluation)
}

function getWorkOrderType(type) {
  const types = {
    1: '定向派遣',
    2: '发布',
  }
  return types[type] || '未知'
}
function getWorkOrderState(type) {
  const types = {
    0: '待发布/待派遣',
    1: '已发布/已派遣',
    2: '已抢单/已接受',
    3: '已到场',
    4: '检测',
    5: '维修',
    6: '已结束',
  }
  return types[type] || '未知'
}

async function fetchData() {
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/workOrder/getWorkOrderInfo', {
      workOrderCode: workOrderCode.value,
    })
    if (response.data) {
      console.log('工单详情页面：', response.data)
      Object.assign(workOrderInfo, response.data.data)
      console.log('workOrderInfo', workOrderInfo)
      Object.assign(customerResp, response.data.data.customerResp)
      Object.assign(testingResp, response.data.data.testingResp)
      Object.assign(repairResp, response.data.data.repairResp)
      Object.assign(evaluateResps, response.data.data.evaluateResps)
      console.log('evaluateResps', evaluateResps)
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
  }
}

async function closeOrder() {
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/workOrder/endWorkOrder', {
      workOrderCode: workOrderCode.value,
    })
    ElMessage({
      message: `关单结果：${JSON.stringify(response.data)}`,
      type: 'success',
    })
  }
  catch (error) {
    ElMessage({
      message: `获取数据时出错: ${error.message}`,
      type: 'error',
    })
  }
}

async function recreateOrder() {
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/workOrder/doItAgainWorkOrder', {
      workOrderCode: workOrderCode.value,
    })
    if (response.data) {
      ElMessage({
        message: `重新生成工单结果：${JSON.stringify(response.data)}`,
        type: 'success',
      })
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
    ElMessage({
      message: `获取数据时出错: ${error.message}`,
      type: 'error',
    })
  }
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="work-order-page">
    <div class="card">
      <h3>工单信息</h3>
      <p>工单号：<span>{{ workOrderInfo.workOrderCode }}</span></p>
      <p>工单类型：<span>{{ getWorkOrderType(workOrderInfo.workOrderType) }}</span></p>
      <p>工单状态：<span>{{ getWorkOrderState(workOrderInfo.workOrderState) }}</span></p>
      <p>响应时间：<span>{{ workOrderInfo.workOrderRequirementDate }}</span></p>
      <p>生成时间：<span>{{ workOrderInfo.workOrderCreateDate }}</span></p>
      <p>派遣/发布时间：<span>{{ workOrderInfo.workOrderEffectDate }}</span></p>
    </div>

    <div class="card" @click="pri">
      <h3>故障描述</h3>
      <p>{{ workOrderInfo.workOrderContent }}</p>
      <h3>故障图片</h3>
      <div class="image-container">
        <img v-for="(url, index) in feedbackImgUrls" :key="index" :src="url" alt="图片附件" class="attachment-image">
      </div>
      <!-- 视频附件 -->
      <p>视频附件：</p>
      <video v-if="workOrderInfo.workOrderVideoFile" controls class="attachment-video">
        <source :src="workOrderInfo.workOrderVideoFile" type="video/mp4">
        您的浏览器不支持视频播放
      </video>
      <p v-else>
        暂无数据
      </p>

      <!-- 语音附件 -->
      <p>语音附件：</p>
      <audio v-if="workOrderInfo.workOrderVoiceFile" controls class="attachment-audio">
        <source :src="workOrderInfo.workOrderVoiceFile" type="audio/mpeg">
        您的浏览器不支持音频播放
      </audio>
      <p v-else>
        暂无数据
      </p>
    </div>

    <div class="card">
      <h3>检测结果</h3>
      <p>{{ workOrderInfo.testingResp?.testingContent }}</p>
      <h3>检测图片</h3>
      <div class="image-container">
        <img v-for="(url, index) in testImgUrls" :key="index" :src="url" alt="图片附件" class="attachment-image">
      </div>
    </div>

    <div class="card">
      <h3>维修结果</h3>
      <p>{{ workOrderInfo.repairResp?.repairContent || '暂无数据' }}</p>
      <h3>维修结果图片</h3>
      <div class="image-container">
        <img v-for="(url, index) in repairImgUrls" :key="index" :src="url" alt="图片附件" class="attachment-image">
      </div>
    </div>

    <div class="card">
      <h3>单位信息</h3>
      <p>单位：<span>{{ customerResp?.customerName }}</span></p>
      <p>联系人：<span>{{ customerResp?.customerUserName }}</span></p>
      <p>电话：<span>{{ customerResp?.customerUserPhone }}</span></p>
      <p>所在地址：<span>{{ customerResp?.customerAddress }}</span></p>
    </div>

    <div class="card">
      <h3>电工信息</h3>
      <p>姓名：{{ workOrderInfo.electricianResp?.electricianName }}<span>（分）</span></p>
      <p>身份证号：<span>{{ workOrderInfo.electricianResp?.electricianIdCode }}</span></p>
      <p>电工编号：<span>{{ workOrderInfo.electricianResp?.electricianCode }}</span></p>
    </div>

    <div v-if="selectedEvaluation" class="card">
      <h3>单位评价</h3>
      <p>评价分数：<span>{{ selectedEvaluation.evaluateScore || "暂无数据" }}</span></p>
      <p>评价时间：<span>{{ selectedEvaluation.evaluateTime || "暂无数据" }}</span></p>
      <p>评价内容：<span>{{ selectedEvaluation.evaluateContent || "暂无数据" }}</span></p>
    </div>

    <div class="card">
      <h3>我的评价</h3>
      <p>评价分数：<span>暂无数据</span></p>
      <p>评价时间：<span>暂无数据</span></p>
      <p>评价内容：<span>暂无数据</span></p>
    </div>

    <div class="action-buttons">
      <!-- <button class="button green">
        定向派遣
      </button>
      <button class="button blue">
        发布工单
      </button>
      <button class="button orange">
        催单
      </button> -->
      <button class="button red" @click="closeOrder">
        关单
      </button>
      <button class="button yellow" @click="recreateOrder">
        重新生成
      </button>
    </div>
  </div>
</template>

<style scoped>
.work-order-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.card {
  padding: 16px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.card h3 {
  margin-bottom: 12px;
}

.card p {
  margin: 4px 0;
}

.card span {
  font-weight: bold;
}

.action-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
}

.button {
  padding: 8px 16px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

.button.green {
  background-color: #4caf50;
}

.button.blue {
  background-color: #2196f3;
}

.button.orange {
  background-color: #ff9800;
}

.button.red {
  background-color: #f44336;
}

.button.yellow {
  color: #000;
  background-color: #ffeb3b;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachment-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.attachment-video,
.attachment-audio {
  display: block;
  width: 100%;
  max-width: 400px;
  margin-top: 8px;
}
</style>
